
import mdl
Colors = mdl.Colors
Icon = mdl.Icon
Themes = mdl.Themes
Column = mdl.Column
Row = mdl.Row
Center = mdl.Center
Grid = mdl.Grid
GridCell = mdl.GridCell
Container = mdl.Container
EdgeInsets = mdl.EdgeInsets
_App = mdl._App
Footer = mdl.Footer
FooterLinkList = mdl.FooterLinkList
FooterLeft = mdl.FooterLeft
FooterRight = mdl.FooterRight
Text = mdl.Text
Badge = mdl.Badge
Button = mdl.Button
Tab = mdl.Tab
Section = mdl.Section
CardTitle = mdl.CardTitle
CardText = mdl.CardText
CardAction = mdl.CardAction
Card = mdl.Card
Chip = mdl.Chip
Dialog = mdl.Dialog
toast = mdl.toast
clear_elt = mdl.clear_elt
Slider = mdl.Slider
Progress = mdl.Progress
Checkbox = mdl.Checkbox
RadioButton = mdl.RadioButton
Switch = mdl.Switch
IconToggle = mdl.IconToggle
Textfield = mdl.Textfield
Table = mdl.Table
List = mdl.List
ListItem = mdl.ListItem
Dropdown = mdl.Dropdown

js = javascript
doc = js.document

def badge_button_card_chip_dialog():
	def action(self):
		js.alert('Clicked')
	return Column(
			Container(
				Row(
					Text(text=Icon('account_box'), badge=Badge(text='1', overlap=True)),
					Text(text=Icon('account_box'), badge=Badge(text='♥', overlap=True)),
					Text(text='Inbox', badge=Badge('4')),
					Text(text='Mood', badge=Badge('♥')),
					),
				margin=EdgeInsets.only(top=20),
				),
			Text(text='This link contains a badge', href='#', badge=Badge('7')),
			Row(
				Text(text='This link is followed by a badge', href='#'),
				Text(text='', badge=Badge('12')),
				),
			Text('This badge has too many characters.', href='#', badge=Badge('123456')),
			Text('This badge has no background color.', href='#', badge=Badge('123', no_background=True)),
			Button(Icon('add'), fab=True, colored=True, action=action),
			Button(Icon('add'), fab=True, ripple_effect=True, colored=True),
			Button(Icon('add'), fab=True),
			Button(Icon('add'), fab=True, ripple_effect=True),
			Button(Icon('add'), fab=True, disabled=True),
			Button('Button', raised=True),
			Button('Button', raised=True, ripple_effect=True),
			Button('Button', raised=True, disabled=True),
			Button('Button', raised=True, colored=True),
			Button(Icon('add'), 'Button', raised=True, accent=True),
			Button('Button', Icon('add'), raised=True, accent=True, ripple_effect=True),
			Button('Button'),
			Button('Button', ripple_effect=True),
			Button('Button', disabled=True),
			Button('Button', primary=True),
			Button('Button', accent=True),
			Button(Icon('mood'), icon=True),
			Button(Icon('mood'), icon=True, colored=True),
			Button(Icon('mood'), icon=True, accent=True),
			Button(Icon('add'), mini_fab=True),
			Button(Icon('add'), mini_fab=True, colored=True),

			Chip('Basic Chip'),
			Chip('Deletable Chip', close_button=True, action=action),
			Chip('Button Chip', button_chip=True, action=action),
			Chip('Contact Chip', contact='A'),
			Chip('Deletable Contact Chip', image='/web/🤖.png', close_button=True),
		)

def make_cards():
	def action1(act):
		if act=='Agree':
			dialog1.close()
	dialog1 = Dialog(content='Allowing us to collect data will let us get you the information you want faster.',
					title='Allow data collection?', action=action1)
	dialog1.render(doc.body)
	def open_dialog1(ev):
		dialog1.show()

	def action2(act):
		if act=='Agree':
			dialog2.close()
	dialog2 = Dialog(content='Allowing us to collect data will let us get you the information you want faster.',
					action=action2,
					actions_full_width=True)
	dialog2.render(doc.body)
	def open_dialog2(ev):
		dialog2.show()
		
	return Column(
			Card(CardTitle('Update', image='/web/🤖.png', image_right=0.15),
				CardText('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.'),
				CardAction('View Updates', open_dialog1),
				width=420, height=320,
				color=Colors.black,
				background_color=Colors.argb('FFC8E6C9'), # green[100]
				shadow=2,
				),
			Card(CardTitle('Featured event:\nMay 24, 2016\n7-11pm'),
				CardAction('Add To Calendar', open_dialog2, Icon('event')),
				width=256, height=256,
				color=Colors.white,
				background_color=Colors('#3E4EB8'),
				shadow=2,
				),
		)

def make_tables():
	head = ['Material','Quantity','Unit price']
	data = [
			['Acrylic (Transparent)', 25, '$2.90'],
			['Plywood (Birch)', 50, '$1.25'],
			['Laminate (Gold on Blue)', 10, '$2.35'],
			]
	container = Container(
		Table(head, data),
		padding=EdgeInsets.only(bottom=20),
		)
	def onchange(r,c,val1,val2):
		print('Table:',r,c,val1,val2)
		container.replace_child(Table(head, data))
	return Center(
		Container(
			Column(
				container,
				Table(head, data, editable=True, onchange=onchange),
				),
			padding=EdgeInsets.all(20),
			bg_color=Colors.argb('FFFAFAFA'), # grey[100]
			),
		)

def make_lists():
	return Center(
		Container(
			Column(
				List(
					ListItem('Bryan Cranston'),
					ListItem('Aaron Paul'),
					ListItem('Bob Odenkirk'),
					),	
				List(
					ListItem('Bryan Cranston', icon=Icon('person')),
					ListItem('Aaron Paul', icon=Icon('person')),
					ListItem('Bob Odenkirk', icon=Icon('person')),
					),
				List(
					ListItem('Bryan Cranston', avatar=Icon('person'),
							action=Button(Icon('star'), icon=True, primary=True)),
					ListItem('Aaron Paul', avatar=Icon('person'),
							action=Button(Icon('star'), icon=True, colored=True)),
					ListItem('Bob Odenkirk', avatar=Icon('person'),
							action=Button(Icon('star'), icon=True, accent=True)),
					),
				List(
					ListItem('Bryan Cranston', avatar=Icon('person'),
							action=Checkbox(checked=True)),
					ListItem('Aaron Paul', avatar=Icon('person'),
							action=RadioButton('item_name', checked=True)),
					ListItem('Bob Odenkirk', avatar=Icon('person'),
							action=Switch(checked=True)),
					),
				List(
					ListItem('Bryan Cranston', sub_title='62 Episodes', avatar=Icon('person'),
							action=IconToggle(Icon('star'), checked=True)),
					ListItem('Aaron Paul', sub_title='62 Episodes', avatar=Icon('person'),
							action=IconToggle(Icon('star'))),
					ListItem('Bob Odenkirk', sub_title='62 Episodes', avatar=Icon('person'),
							action=IconToggle(Icon('star'))),
					),
				List(
					ListItem('Bryan Cranston', avatar=Icon('person'),
							text_body='Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.',
							action=IconToggle(Icon('star'), checked=True)),
					ListItem('Aaron Paul', avatar=Icon('person'),
							text_body='Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie.',
							action=IconToggle(Icon('star'))),
					ListItem('Bob Odenkirk', avatar=Icon('person'),
							text_body='Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul"',
							action=IconToggle(Icon('star'))),
					),
				),
			width=600,
			padding=EdgeInsets.all(20),
			bg_color=Colors.argb('FFFAFAFA'), # grey[100]
			),
		)

def make_tabs_inputs():
	slider = Slider(disabled=True)
	progress = Progress(disabled=True)
	def slider_change(value):
		slider.change(value)
		progress.set_progress(value)
		progress.set_buffer(100-((100-value)//2))
	def check_toast(value):
		print(f'value: {value}')
		toast(f'value: {value}')
	return Tab(sections=[
		Section('滑动条+进度条', Center(
			Container(
				Column(
					slider,
					Slider(value=50, onchange=slider_change),
					progress,
				),
				width=300,
				margin=EdgeInsets.all(30),
			),
		)),
		Section('复选框', Center(
			Column(
				Checkbox('Disabled', disabled=True),
				Checkbox('Control', onchange=check_toast),
			),
		)),
		Section('单选按钮', Center(
			Column(
				RadioButton('choice-1', 'First', onchange=check_toast),
				RadioButton('choice-1', 'Second', onchange=check_toast),
				RadioButton('choice-1', 'Third', onchange=check_toast),
			),
		)),
		Section('开关', Center(
			Column(
				Switch('First', checked=True, onchange=check_toast),
				Switch('Second', onchange=check_toast),
				Switch(disabled=True, onchange=check_toast),
				IconToggle(Icon('format_bold'), checked=True, onchange=check_toast),
				IconToggle(Icon('format_italic'), onchange=check_toast),
				IconToggle(Icon('format_bold'), disabled=True, onchange=check_toast),
			),
		)),
		Section('文本框', Center(
			Column(
				Textfield('初始内容', label='文本...', onchange=check_toast),
				Textfield(label='数字...', onchange=check_toast, 
							pattern='-?[0-9]*(\\.[0-9]+)?',
							error='输入不是数字!'),
				Textfield(label='文本...', onchange=check_toast,
							floating_label=True),
				Textfield(label='数字...', onchange=check_toast, 
							pattern='-?[0-9]*(\\.[0-9]+)?',
							error='输入不是数字!',
							floating_label=True),
				Textfield(label='多行文本...', rows=3, onchange=check_toast),
				Textfield(label='多行文本...', rows=1, onchange=check_toast,
							floating_label=True),
				Textfield(label='多行文本 (最多6行)', rows=3, maxrows=6, 
							onchange=check_toast),
			),
		)),
		Section('下拉菜单', Center(
			Container(
				Column(
					Dropdown(['Some Action','Another Action','Yet Another Action'], 
						onchange=check_toast,
						textfield=Textfield(onchange=check_toast),
						),
					Dropdown(['Some Action','Another Action','Yet Another Action'], 
						onchange=check_toast,
						),
				),
			),
		)),
	])

pages = [
	Section('按钮', child=Center(badge_button_card_chip_dialog())),
	Section('卡片', child=Center(make_cards())),
	Section('表格', child=Center(make_tables())),
	Section('列表', child=Center(make_lists())),
	Section('标签页+输入', child=Center(make_tabs_inputs())),
]

def make_footer_list(*texts):
	return FooterLinkList([[text,'#'] for text in texts])

footer = Footer(
	left=FooterLeft(list=make_footer_list('A','B','C'), button=False),
	right=FooterRight(list=make_footer_list('Introduction','App Status Dashboard','Terms of Service'), button=False),
	)

def run_app():
	app = _App(title="Python MDL 演示", 
				app_icon="/web/🤖.png",
				fixed_header=True,
				sections=pages,
				# footer=footer
				)
	app.render(doc.body)
	def change_theme(ev):
		mdl.Themes(primary='amber', accent='red').apply()
	Button(Icon('theater_comedy'),
			fab=True,
			action=change_theme, 
			ripple_effect=True, 
			raised=True, 
			accent=True,
			floating_fixed=True,
			floating_bottom=30,
			floating_right=30,
		).render(doc.body)

run_app()